<template>
  <div class="user-center-index">
    <div class="page-title">个人中心</div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper" v-if="userInfo">
        <div class="section">
          <div class="section-title">基本信息</div>
          <div class="row">
            <div class="label">单位名称</div>
            <div class="content">{{ userInfo.loginPostInfo.orgName }}</div>
          </div>
          <div class="row">
            <div class="label">系统登录账号</div>
            <div class="content">{{ loginName }}</div>
          </div>
        </div>
        <div class="section">
          <div class="section-title">安全设置</div>
          <div class="row">
            <div class="label">设置密码</div>
            <div class="content btn" @click="pwdDialogVisible = true">设置</div>
          </div>
        </div>
        <div class="section" v-if="showPostUsers">
          <div class="section-title">
            当前系统使用人员（切换后组织架构将同步调整）
            <el-button v-if="postUserInfo" type="text" class="change-user-btn" @click="changeUserDialogVisible = true">切换</el-button>
          </div>
          <div class="row">
            <div class="label">姓名</div>
            <div class="content">{{ (postUserInfo && postUserInfo.userName) || '-' }}</div>
          </div>
          <div class="row">
            <div class="label">职位</div>
            <div class="content">{{ (postUserInfo && postUserInfo.post) || '-' }}</div>
          </div>
          <div class="row">
            <div class="label">邮箱</div>
            <div class="content">{{ (postUserInfo && postUserInfo.email) || '-' }}</div>
          </div>
          <div class="row">
            <div class="label">手机号</div>
            <div class="content">
              <span>{{ postUserInfo && postUserInfo.phone }}</span>
              <span class="btn" @click="editUserDialogVisible = true">{{ (postUserInfo && '编辑') || '新增' }}</span>
            </div>
          </div>
        </div>
        <div class="section" v-else>
          <div class="section-title">当前系统使用人员</div>
          <div class="row">
            <div class="label">姓名</div>
            <div class="content">{{ userInfo.userName }}</div>
          </div>
          <div class="row">
            <div class="label">职位</div>
            <div class="content">{{ userInfo.loginPostInfo.postName }}</div>
          </div>
          <div class="row">
            <div class="label">邮箱</div>
            <div class="content">{{ userInfo.email || '-' }}</div>
          </div>
          <div class="row">
            <div class="label">手机号</div>
            <div class="content">
              <span>{{ userInfo.telephone }}</span>
              <span class="btn" v-if="userInfo.telephone" @click="phoneDialogVisible = true">修改</span>
              <span class="btn" v-else @click="bindDialogVisible = true">绑定手机号</span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <reset-pwd-dialog :visible.sync="pwdDialogVisible"></reset-pwd-dialog>
    <reset-phone-dialog :visible.sync="phoneDialogVisible"></reset-phone-dialog>
    <bind-phone-dialog :visible.sync="bindDialogVisible"></bind-phone-dialog>

    <edit-user-dialog
      :visible.sync="editUserDialogVisible"
      :edit-info="postUserInfo"
      @edit-success="getCurrUserInfo"
      @add-success="getCurrUserInfo"></edit-user-dialog>
    <change-user-dialog :visible.sync="changeUserDialogVisible" @changed="getCurrUserInfo"></change-user-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ResetPhoneDialog from './components/ResetPhoneDialog.vue'
import BindPhoneDialog from './components/BindPhoneDialog.vue'
import ResetPwdDialog from './components/ResetPwdDialog.vue'
import EditUserDialog from './components/EditUserDialog.vue'
import ChangeUserDialog from './components/ChangeUserDialog.vue'
import { listUser } from '@api/modules/user'
export default {
  name: 'userIndex',
  components: { ResetPwdDialog, ResetPhoneDialog, BindPhoneDialog, EditUserDialog, ChangeUserDialog },
  data() {
    return {
      loginName: localStorage.getItem('efficacy_loginName'),
      pwdDialogVisible: false,
      phoneDialogVisible: false,
      bindDialogVisible: false,
      editUserDialogVisible: false,
      changeUserDialogVisible: false,
      postUserInfo: null,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    showPostUsers() {
      if (this.$store.getters.isProvinceRole || this.$store.getters.isCityRole) {
        return true
      }
      return false
    },
  },
  watch: {},
  created() {
    // if (this.showPostUsers) {
    this.getCurrUserInfo()
    // }
  },
  mounted() {},
  methods: {
    getCurrUserInfo() {
      listUser(true).then(res => {
        if (res.status === 200) {
          const resData = res.data
          this.postUserInfo = resData && resData[0]
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.user-center-index {
  height: 100%;
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  .page-title {
    font-size: 20px;
    padding: 20px;
    line-height: 20px;
    font-weight: bold;
    color: #333;
  }
  .page-content {
    flex: 1;
    overflow: hidden;
    background: #f5f5f5;
    padding: 10px 0;
    .content-wrapper {
      width: 65%;
      max-width: 800px;
      margin: 0 auto;
    }
    .section {
      margin-top: 20px;
      background: #fff;
      border: 1px solid #e7e7e7;
      padding: 20px;
      .section-title {
        color: #999;
        margin-bottom: 10px;
      }
      .row {
        display: flex;
        padding: 12px 5px;
        font-size: 16px;
        &:not(:last-child) {
          border-bottom: 1px dashed #ddd;
        }
        .label {
          color: #333;
          width: 100px;
        }
        .content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .btn {
          color: #2c63b0;
          font-size: 14px;
          cursor: pointer;
          margin-left: 5px;
        }
        .center-info {
          margin: 0 10px;
        }
      }
    }
  }
  .change-user-btn {
    float: right;
    padding: 0;
  }
}
</style>
